<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                template="./../template/WorkspaceTemplate.xhtml">

    <ui:define name="top">

    </ui:define>

    <ui:define name="left">

    </ui:define>

    <ui:define name="right">

    </ui:define>

    <ui:define name="content">

        <h2>Add New Supplier</h2>
        <h:form id="addSupplierForm" style="font-size: 85%">
            <br/>
            <p:panel>
                <p:messages/>
                <br/>
                <h:panelGrid columns="2" cellpadding="10">

                    <h:outputText value="Supplier Id: " style="font-weight: bold"/>
                    <h:outputText value="#{supplierManagerBean.supplier.supplierId}"/>                    

                    <h:outputText value="Supplier Name: " style="font-weight: bold"/>
                    <p:inputText value="#{supplierManagerBean.supplier.supplierName}"/>

                </h:panelGrid>

                <br/>
                <br/>
                <h:outputText value="Contact Information" style="font-weight: bold; font-size: 110%"/>
                <p:separator/> 
                <br/>
                <p:dataTable id="contacts" var="rec" value="#{supplierManagerBean.supplier.contacts}" emptyMessage="No contacts added.">
                    <p:column headerText="Name" >
                        <h:outputText value="#{rec.name}"/>
                    </p:column>

                    <p:column headerText="Designation" >
                        <h:outputText value="#{rec.jobTitle}"/>
                    </p:column>

                    <p:column headerText="Phone" >
                        <h:outputText value="#{rec.phone}"/>
                    </p:column>

                    <p:column headerText="E-Mail" >
                        <h:outputText value="#{rec.email}"/>
                    </p:column>

                    <p:column headerText="Executive" >
                        <h:outputText value="#{rec.executive?'Yes':'No'}"/>
                    </p:column>

                    <p:column headerText="Options">
                        <p:commandButton id="editContactButton" title="Edit" image="ui-icon ui-icon-pencil" actionListener="#{supplierManagerBean.editContact}" update="editContactRecordForm" oncomplete="editContactRecordDialog.show()">
                            <f:attribute name="selected" value="#{rec}"/>
                        </p:commandButton>
                        <p:commandButton title="Remove" image="ui-icon ui-icon-trash" actionListener="#{supplierManagerBean.removeContact}" oncomplete="removeContactDialog.show()" > 
                            <f:attribute name="selected" value="#{rec}"/>
                        </p:commandButton>
                    </p:column>

                </p:dataTable>
                <br/>
                <div align="right">
                    <p:commandButton value="Add Contact" image="ui-icon ui-icon-circle-plus" oncomplete="addContactRecordDialog.show()" />
                </div>

                <br/>
                <br/>
                <br/>
                <h:outputText value="Supplier Address" style="font-weight: bold; font-size: 110%"/>
                <p:separator/>
                <br/>
                <h:panelGrid columns="2" cellpadding="0 10">
                    <h:outputLabel style="font-weight: bold" value="Address Line 1: "/>
                    <p:inputText size="80" value="#{supplierManagerBean.supplier.supplierAddress.addressLine1}"/>

                    <h:outputLabel style="font-weight: bold" value="Address Line 2: "/>
                    <p:inputText size="80" value="#{supplierManagerBean.supplier.supplierAddress.addressLine2}" />

                    <h:outputLabel style="font-weight: bold" value="State: "/>
                    <p:inputText value="#{supplierManagerBean.supplier.supplierAddress.stateName}" />

                    <h:outputLabel style="font-weight: bold" value="City: "/>
                    <p:inputText value="#{supplierManagerBean.supplier.supplierAddress.city}" />

                    <h:outputLabel style="font-weight: bold" value="Country: "/>
                    <p:inputText value="#{supplierManagerBean.supplier.supplierAddress.country}" />

                    <h:outputLabel style="font-weight: bold" value="Zip Code: "/>
                    <p:inputText size="6" value="#{supplierManagerBean.supplier.supplierAddress.zipCode}" />
                </h:panelGrid>

                <br/>
                <br/>
                <br/>
                <h:outputText value="Supply Information" style="font-weight: bold; font-size: 110%"/>
                <p:separator/> 
                <br/>
                <p:dataTable id="materials" var="rec" value="#{supplierManagerBean.supplier.rawMaterialsSupplied}" emptyMessage="No raw materials added.">
                    <p:column headerText="Raw Material" >
                        <h:outputText value="#{rec.rawMaterial.name}"/>
                    </p:column>

                    <p:column headerText="Unit Price (SGD) / kg" >
                        <h:outputText value="#{rec.unitPriceSGD}">
                            <f:convertNumber type="currency"/>
                        </h:outputText>
                    </p:column>

                    <p:column headerText="Unit Price (USD) / kg" >
                        <h:outputText value="#{rec.unitPriceUSD}">
                            <f:convertNumber type="currency"/>
                        </h:outputText>
                    </p:column>

                    <p:column headerText="Options">
                        <p:commandButton title="Edit" image="ui-icon ui-icon-pencil" actionListener="#{supplierManagerBean.setRawMaterial}" update="addSupplier:materials editRawMaterialForm addRawMaterialForm" oncomplete="editRawMaterialDialog.show()">
                            <f:attribute name="selected" value="#{rec}"/>
                        </p:commandButton>
                        <p:commandButton title="Remove" image="ui-icon ui-icon-trash" actionListener="#{supplierManagerBean.removeRawMaterial}" oncomplete="removeRawMaterialDialog.show()" > 
                            <f:attribute name="selected" value="#{rec}"/>
                        </p:commandButton>
                    </p:column>
                </p:dataTable>
                <br/>
                <div align="right">
                    <p:commandButton value="Add Raw Material" image="ui-icon ui-icon-circle-plus" oncomplete="addRawMaterialDialog.show()"/>
                </div>
                <br/>
                <br/>
            </p:panel>
            <br/>
            <br/>
            <br/>
            <div align="right">
                <p:commandButton value="Add New Supplier" image="ui-icon ui-icon-disk" action="#{supplierManagerBean.addNewSupplier()}" update="addSupplierForm"/>
            </div>
            <br/>
            <br/>
            <br/>
        </h:form>


        <p:dialog id="addContactRecordDialog" header="Add Contact Record" widgetVar="addContactRecordDialog" modal="true" showEffect="fade" hideEffect="fade" width="500" resizable="false" closable="false">
            <h:form id="addContactRecordForm">
                <br/>
                <p:messages />
                <h:panelGrid columns="2" style="margin-bottom:10px">  
                    <h:outputLabel style="font-weight: bold" value="Name:" />  
                    <p:inputText size="50" value="#{supplierManagerBean.contact.name}" />

                    <h:outputLabel style="font-weight: bold" value="Designation:" />  
                    <p:inputText size="50" value="#{supplierManagerBean.contact.jobTitle}" />

                    <h:outputLabel style="font-weight: bold" value="Phone:" />  
                    <p:inputMask value="#{supplierManagerBean.contact.phone}" mask="(999)999-9999"/>

                    <h:outputLabel style="font-weight: bold" value="E-mail:" />
                    <p:inputText size="50" value="#{supplierManagerBean.contact.email}"/>

                    <h:outputLabel style="font-weight: bold" value="Executive:" />
                    <h:selectBooleanCheckbox value="#{supplierManagerBean.contact.executive}"/>
                </h:panelGrid>
                <br/>
                <div align="right">
                    <p:commandButton image="ui-icon ui-icon-check" value="Add Contact" actionListener="#{supplierManagerBean.addContactRecord}" update="addSupplierForm:contacts addContactRecordForm" oncomplete="handleAddContactRecord(xhr, status, args)"/>
                    <p:commandButton image="ui-icon ui-icon-close" value="Cancel" actionListener="#{supplierManagerBean.cancelAddContactRecord}" update="addSupplierForm:contacts addContactRecordForm" oncomplete="addContactRecordDialog.hide()"/>
                </div>
            </h:form>
        </p:dialog>

        <script type="text/javascript">  
            function handleAddContactRecord(xhr, status, args) {  
                if(!args.valid) {  
                    jQuery('#addContactRecordDialog').parent().effect("shake", { times:3 }, 100);
                } else {  
                    addContactRecordDialog.hide();
                }  
            }  
        </script>

        <p:dialog id="editContactRecordDialog" header="Edit Contact Record" widgetVar="editContactRecordDialog" modal="true" showEffect="fade" hideEffect="fade" width="500" resizable="false" closable="false">
            <h:form id="editContactRecordForm">
                <br/>
                <p:messages />
                <h:panelGrid columns="2" style="margin-bottom:10px">  
                    <h:outputLabel style="font-weight: bold" value="Name:" />  
                    <p:inputText size="50" value="#{supplierManagerBean.contact.name}" />

                    <h:outputLabel style="font-weight: bold" value="Designation:" />  
                    <p:inputText size="50" value="#{supplierManagerBean.contact.jobTitle}" />

                    <h:outputLabel style="font-weight: bold" value="Phone:" />  
                    <p:inputMask value="#{supplierManagerBean.contact.phone}" mask="(999)999-9999"/>

                    <h:outputLabel style="font-weight: bold" value="E-mail:" />
                    <p:inputText size="50" value="#{supplierManagerBean.contact.email}"/>

                    <h:outputLabel style="font-weight: bold" value="Executive:" />
                    <h:selectBooleanCheckbox value="#{supplierManagerBean.contact.executive}"/>
                </h:panelGrid>
                <br/>
                <div align="right">
                    <p:commandButton image="ui-icon ui-icon-check" value="Update Contact" actionListener="#{supplierManagerBean.updateEditContactRecord}" update="addSupplierForm:contacts editContactRecordForm" oncomplete="handleEditContactRecord(xhr, status, args)"/>
                    <p:commandButton image="ui-icon ui-icon-close" value="Cancel" actionListener="#{supplierManagerBean.cancelEditContactRecord}" update="addSupplierForm:contacts editContactRecordForm" oncomplete="editContactRecordDialog.hide()"/>
                </div>
            </h:form>
        </p:dialog>

        <script type="text/javascript">  
            function handleEditContactRecord(xhr, status, args) {  
                if(!args.valid) {  
                    jQuery('#editContactRecordDialog').parent().effect("shake", { times:3 }, 100);
                } else {  
                    editContactRecordDialog.hide();
                }  
            }  
        </script>

        <p:confirmDialog message="Delete contact?" width="200"  
                         showEffect="fade" hideEffect="fade"  
                         header="Confirm" severity="alert" widgetVar="removeContactDialog">  
            <h:form id="deleteContact">
                <p:commandButton value="Yes" actionListener="#{supplierManagerBean.confirmRemoveContact}" update="addSupplierForm:contacts  addContactRecordForm editContactRecordForm" oncomplete="removeContactDialog.hide()"/>  
                <p:commandButton value="No" actionListener="#{supplierManagerBean.cancelRemoveContact}" oncomplete="removeContactDialog.hide()"/>  
            </h:form>
        </p:confirmDialog>

        <p:dialog id="addRawMaterialDialog" header="Add Raw Material" widgetVar="addRawMaterialDialog" showEffect="fade" hideEffect="fade" resizable="false" modal="true" width="600" closable="false">  
            <h:form id="addRawMaterialForm">
                <br/>
                <p:messages/>
                <h:panelGrid columns="3" cellpadding="10">

                    <h:outputLabel style="font-weight: bold" value="Raw Material Item: "/>
                    <p:inputText size="40" value="#{supplierManagerBean.rmsi.rawMaterial.name}" disabled="true" />
                    <p:commandButton oncomplete="rawMaterialDialog.show()" image="ui-icon ui-icon-search" title="Get Raw Material" update="rawMaterialForm"/>

                    <h:outputLabel style="font-weight: bold" value="Currency: "/>
                    <h:selectOneRadio value="#{supplierManagerBean.rmsi.currency}" >
                        <f:selectItem itemLabel="SGD" itemValue="true"/>
                        <f:selectItem itemLabel="USD" itemValue="false"/>
                        <p:ajax update="addRawMaterialForm"/>
                    </h:selectOneRadio>
                    <h:outputLabel value=""/>
                </h:panelGrid>


                <h:panelGroup id="price" rendered="#{supplierManagerBean.rmsi.currency != null}">
                    <h:panelGrid columns="2" cellpadding="10">
                        <h:outputLabel style="font-weight: bold" value="Unit Price /kg: " />
                        <p:inputText value="#{supplierManagerBean.rmsi.unitPriceSGD}" rendered="#{supplierManagerBean.rmsi.currency}"/>
                        <p:inputText value="#{supplierManagerBean.rmsi.unitPriceUSD}" rendered="#{!supplierManagerBean.rmsi.currency}"/>
                    </h:panelGrid>
                </h:panelGroup>

                <br/>
                <br/>
                <div align="right">
                    <p:commandButton image="ui-icon ui-icon-check" value="Add Raw Material" update="addSupplierForm:materials addRawMaterialForm editRawMaterialForm" actionListener="#{supplierManagerBean.addRawMaterial}" oncomplete="handleAddRawMaterial(xhr, status, args)"/>
                    <p:commandButton image="ui-icon ui-icon-close" value="Cancel" actionListener="#{supplierManagerBean.cancelAddRawMaterial}" update="addSupplierForm:materials editRawMaterialForm addRawMaterialForm" oncomplete="addRawMaterialDialog.hide()"/>
                </div>
                <br/>

            </h:form>
        </p:dialog>

        <script type="text/javascript">  
            function handleAddRawMaterial(xhr, status, args) {
                if(!args.valid) {  
                    jQuery('#addRawMaterialDialog').parent().effect("shake", { times:3 }, 100);
                } else {
                    addRawMaterialDialog.hide();
                }
            }
        </script>

        <p:dialog header="Search Raw Material" widgetVar="rawMaterialDialog" showEffect="fade" hideEffect="fade" resizable="false" modal="true" width="600">
            <h:form id="rawMaterialForm">
                <br/>
                <p:dataTable var="rawMaterial" value="#{supplierManagerBean.allRawMaterial}" emptyMessage="No raw material found with given criteria"  selection="#{supplierManagerBean.rmsi.rawMaterial}" selectionMode="single">

                    <p:column filterBy="#{rawMaterial.name}" 
                              headerText="Raw Material"
                              filterMatchMode="contains">
                        <h:outputText value="#{rawMaterial.name}" />
                    </p:column>

                </p:dataTable>
                <br/>
                <br/>
                <div align="right">
                    <p:commandButton value="Select Raw Material" update="addRawMaterialForm editRawMaterialForm" oncomplete="rawMaterialDialog.hide()"/>
                </div>
                <br/>
            </h:form>
        </p:dialog>

        <p:dialog id="editRawMaterialDialog" header="Edit Raw Material" widgetVar="editRawMaterialDialog" showEffect="fade" hideEffect="fade" resizable="false" modal="true" width="600" closable="false">  
            <h:form id="editRawMaterialForm">
                <br/>
                <p:messages/>
                <h:panelGrid columns="3" cellpadding="10">

                    <h:outputLabel style="font-weight: bold" value="Raw Material Item: "/>
                    <p:inputText size="40" value="#{supplierManagerBean.rmsi.rawMaterial.name}" disabled="true" />
                    <p:commandButton oncomplete="rawMaterialDialog.show()" image="ui-icon ui-icon-search" title="Get Raw Material" update="rawMaterialForm"/>

                    <h:outputLabel style="font-weight: bold" value="Currency: "/>
                    <h:selectOneRadio value="#{supplierManagerBean.rmsi.currency}" >
                        <f:selectItem itemLabel="SGD" itemValue="true"/>
                        <f:selectItem itemLabel="USD" itemValue="false"/>
                        <p:ajax update="editRawMaterialForm"/>
                    </h:selectOneRadio>
                    <h:outputLabel value=""/>
                </h:panelGrid>


                <h:panelGroup rendered="#{supplierManagerBean.rmsi.currency != null}">
                    <h:panelGrid columns="2" cellpadding="10">
                        <h:outputLabel style="font-weight: bold" value="Unit Price /kg: " />
                        <p:inputText value="#{supplierManagerBean.rmsi.unitPriceSGD}" rendered="#{supplierManagerBean.rmsi.currency}"/>
                        <p:inputText value="#{supplierManagerBean.rmsi.unitPriceUSD}" rendered="#{!supplierManagerBean.rmsi.currency}"/>
                    </h:panelGrid>
                </h:panelGroup>
                <br/>
                <br/>
                <div align="right">
                    
                    <p:commandButton image="ui-icon ui-icon-check" value="Update Raw Material" update="addSupplierForm:materials editRawMaterialForm addRawMaterialForm" actionListener="#{supplierManagerBean.updateEditRawMaterial}" oncomplete="handleEditRawMaterial(xhr, status, args)"/>
                    <p:commandButton image="ui-icon ui-icon-close" value="Cancel" actionListener="#{supplierManagerBean.cancelEditRawMaterial}" update="addSupplierForm:materials editRawMaterialForm addRawMaterialForm" oncomplete="editRawMaterialDialog.hide()"/>
                </div>
                <br/>

            </h:form>
        </p:dialog>

        <script type="text/javascript">
            function handleEditRawMaterial(xhr, status, args) {
                if(!args.valid) {  
                    jQuery('#editRawMaterialDialog').parent().effect("shake", { times:3 }, 100);
                } else {
                    editRawMaterialDialog.hide();
                }
            }
        </script>

        <p:confirmDialog message="Delete raw material?" width="200"  
                         showEffect="fade" hideEffect="fade"  
                         header="Confirm" severity="alert" widgetVar="removeRawMaterialDialog">  
            <h:form id="deleteRawMaterial">
                <p:commandButton value="Yes" actionListener="#{supplierManagerBean.confirmRemoveRawMaterial}" update="addSupplierForm:materials  addRawMaterialForm editRawMaterialForm" oncomplete="removeRawMaterialDialog.hide()"/>  
                <p:commandButton value="No" actionListener="#{supplierManagerBean.cancelRemoveRawMaterial}" update="addSupplierForm:materials  addRawMaterialForm editRawMaterialForm" oncomplete="removeRawMaterialDialog.hide()"/>  
            </h:form>
        </p:confirmDialog>

    </ui:define>

    <ui:define name="bottom">

    </ui:define>

</ui:composition>
